<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>打卡</title>
    <link rel="stylesheet" href="./css/style.css"/>
    <link rel="stylesheet" href="./css/calendar.css"/>
    <link rel="stylesheet" href="https://fastly.jsdelivr.net/npm/vant@4/lib/index.css"/>
    <style>
        .item-wrap{
            padding: 20px;
        }
        .item{
            border-radius: 10px;
            height: 100%;
            position: relative;
        }
        .item > img{
            display: block;
            border-radius: 10px;
        }
        .title {
            color: #fff;
            top: 50%;
            left: 8%;
            font-size: 25px;
            font-weight: 300;
            transform: skew(-10deg, 0deg);
            position: absolute;
            text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3)
        }

        .signin-area {
            margin-top: 40px;
            text-align: center;
        }

        .signin-btn {
            width: 100px;
            height: 100px;
            box-shadow: 0px 6px 15px 0px rgba(25, 137, 250, 0.34);
            font-size: 18px;
        }

        .signin-area .signin-result {
            color: #999;
            font-size: 13px;
            margin-top: 10px;
        }

    </style>
</head>
<body>
    <div id="app">
        <van-nav-bar title="打卡项目" placeholder></van-nav-bar>
        <div class="item-wrap">
            <div v-for="(item,index) in list" :key="index" class="item" :style="{marginTop:index ? '20px' : '0px'}" @click="showPopup(item.id)">
                <img class="w-full" :src="item.cover" />
                <span class="title">{{ item.title }}</span>
            </div>
        </div>
        <van-popup v-model:show="popup" :style="{ padding: '50px 10px', height: '100%' }" closeable position="bottom">
            <calendar
                    v-if="popup"
                    :data="clockList"
                    @change-month="changeMonth"
            ></calendar>
            <div class="signin-area">
                <van-button class="signin-btn" type="primary" round @click="signin">打卡</van-button>
                <div class="signin-result">
                    <p>本月已打卡{{ clockList.length }}次</p>
                    <p>共打卡{{ total }}次</p>
                </div>
            </div>
        </van-popup>
    </div>

    <script src="https://fastly.jsdelivr.net/npm/vue@3"></script>
    <script src="https://fastly.jsdelivr.net/npm/vant@4/lib/vant.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios@1.6.0/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/dayjs@1/dayjs.min.js"></script>
    <script src="js/template.js"></script>
    <script>
        const app = Vue.createApp({
            setup() {
                const list = Vue.ref([])
                const getList = () => {
                    axios.get('/item')
                        .then(res => {
                          const { code, data, message } = res.data
                            if (code !== 0){
                                vant.showToast(message)
                            }else{
                                list.value = data.list
                            }
                        })
                        .catch(err => {
                            vant.showFailToast(err)
                        })
                }
                getList()

                const popup = Vue.ref(false)
                const clockList = Vue.ref([])
                const total = Vue.ref([])
                let selectId
                const currentMonth = dayjs(new Date()).format('YYYY-MM')
                const showPopup = async (id) => {
                    selectId = id
                    await getClockList(currentMonth)
                    popup.value = true
                }

                const getClockList = (month) => {
                    axios.get(`/clockIn?item_id=${selectId}&month=${month}`)
                        .then(res => {
                            const { code, data, message } = res.data
                            if (code !== 0){
                                vant.showToast(message)
                            }else{
                                clockList.value = data.list.map(item => dayjs(item.created_at).format('YYYY-MM-DD'))
                                total.value = data.total
                            }
                        })
                        .catch(err => {
                            vant.showFailToast(err)
                        })
                }

                const changeMonth = (month) => {
                    getClockList(month)
                }

                const signin = () => {
                    axios.post('/clockIn',{
                        item_id:selectId
                    })
                        .then(res => {
                            const { code, data, message } = res.data
                            if (code !== 0){
                                vant.showToast(message)
                            }else{
                                vant.showSuccessToast('打卡成功')
                                getClockList(currentMonth)
                            }
                        })
                        .catch(err => {
                            vant.showFailToast(err)
                        })
                }

                return {
                    list,
                    getList,
                    popup,
                    showPopup,
                    clockList,
                    total,
                    changeMonth,
                    signin
                }
            }
        })
        app.use(vant)
        app.use(vant.Lazyload)
        app.component('calendar', calendar)
        app.mount('#app');
    </script>
</body>
</html>